const mainData = [];
mainData.push({
  name: '充值收入',
  value: 342305,
  prevalue: 382305,
  hismax: 455898,
});
mainData.push({
  name: '包月收入',
  value: 1332042,
  prevalue: 1552305,
  hismax: 1896900,
});
mainData.push({
  name: '道具消费',
  value: 305652,
  prevalue: 323305,
  hismax: 446783,
});
mainData.push({
  name: '新增用户',
  value: 31861,
  prevalue: 30805,
  hismax: 77598,
});
mainData.push({
  name: '活跃用户',
  value: 114553,
  prevalue: 120105,
  hismax: 145898,
});

function createSeries(mainData) {
  const result = [];
  const insideLabel = {
    normal: {
      position: 'center',
      formatter(params) {
        if (params.name == 'other') { return ''; }
        return `${params.value}\n${params.name}`;
      },
      textStyle: {
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontSize: 18,
      },
    },
  };
  const outsideLabel = {
    normal: {
      show: false,
    },
  };
  const itemOthers = {
    normal: {
      color: '#ccc',
    },
  };
  for (let i = 0; i < mainData.length; i++) {
    const increase = mainData[i].value > mainData[i].prevalue;
    result.push({
      type: 'pie',
      center: [`${i * 20 + 10}%`, '30%'],
      radius: ['15%', '18%'],
      label: insideLabel,
      data: [{
        name: 'other',
        value: mainData[i].hismax - mainData[i].value,
        itemStyle: itemOthers,
      }, {
        name: mainData[i].name,
        value: mainData[i].value,
        prevalue: mainData[i].prevalue,
      }],
      markPoint: {
        data: [{
          symbol: 'triangle',
          symbolSize: 15,
          symbolRotate: increase ? 0 : 180,
          itemStyle: {
            normal: {
              color: increase ? 'red' : 'green',
            },
          },
          name: mainData[i].name,
          value: `${((mainData[i].value - mainData[i].prevalue) * 100 / mainData[i].prevalue).toFixed(2)}%`,
          x: myChart.getWidth() * (i + 0.5) / 5 - 15,
          y: myChart.getHeight() * 0.45 + 15,
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter(params) {
                return params.value;
              },
              textStyle: {
                color: increase ? 'red' : 'green',
              },
            },
          },
        },
        ],
      },
    });
  }
  return result;
}
option = {
  title: {
    text: '关键指标',
    subtext: '这是你最关心的数据了吧？',
    x: 'left',
  },
  toolbox: {
    show: true,
    feature: {
      dataView: {
        show: true,
        readOnly: true,
      },
      restore: {
        show: true,
      },
      saveAsImage: {
        show: true,
      },
    },
  },
  series: createSeries(mainData),
};
